<template>
   <div>

    <!-- 头部 -->
       <div class="center" id="Head">
           <img :src="PersonalData.headphoto" class="headphoto">
           <div class="center" id="name">{{PersonalData.username}}</div>
           <div class="center flex">
              <img src="@/assets/default/information/Man.png" v-if="PersonalData.sex=='男'" class="icon">
              <img src="@/assets/default/information/Woman.png" v-else-if="PersonalData.sex=='女'" class="icon">
              <div id="age">{{PersonalData.birthday | age}}</div>
              <!-- <img src="@/assets/default/information/Address.png" class="icon"> -->
            </div>
       </div>
 

    <!-- 导航 -->
       <div id="Navi" >
            <button  v-for="item in NaviData" :key="item.id" 
                    class="NaviOneBox flex"
                    @click="beforeSubmit(item)">
                    <div class="flex" :class="item.id==NaviIndex?'NaviOne flex active':'NaviOne flex'" >
                       <img :src="require('@/assets/default/information/'+item.src)" class="icon">
                       {{item.name}}
                    </div>
            </button>
       </div>
 
      
   </div>
</template>
<script>
import {mapState,mapMutations,mapActions} from 'vuex'
  export default 
  {
     name :'', 
     computed:{
        ...mapState('Personal',['NaviIndex','PersonalData'])
     },
     data() {
        return {
             count:0,
             timer:null,
             NaviData:[
                  {id:1,name:'文章',src:"Article.png",click:this.getArticle,args:{type:'space',index:1}},
                  {id:2,name:'收藏',src:"Collect.png",click:this.getArticle,args:{type:'collect',index:2}},
                  {id:3,name:'点赞',src:"Like.png",click:this.getArticle,args:{type:'like',index:3}},
                //   {id:4,name:'其他',src:"Like.png",click:null}
            ]
        }
    }, 
    methods:{
        ...mapMutations('Personal',['SETNAVIINDEX']),
        ...mapActions('Personal',['getArticle']),
        TimeKeeping(){
           clearTimeout( this.timer)
           this.timer = setTimeout(() => {
              this.count = 0
              clearTimeout( this.timer)
          }, 1000);
        },
        beforeSubmit(fun){ 
           if(fun.click == null) return this.$message.warning('功能暂未实现')
            this.TimeKeeping()
           if(this.count >= 10) {
              this.$message.warning('请勿频繁操作')
              return 
            }
           this.SETNAVIINDEX({index:fun.id,type:fun.args?.type})
           this.count += 1
           let data = {...fun.args,...{uid:this.PersonalData?.uid}}
           fun.click(data)
           

        }
    } 
  }
</script>
<style scoped lang='less'>
.center{
    width: 100%;
    text-align: center;
}
.headphoto{
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 5px solid white;
}

//头像 名字
#Head{
    background: var(--PersonalBackColor);
    border-radius: 15px;
    padding: 20px 0;
    width: 100%;
    #name{
        font-size: 25px;
        color: white;
        font-weight: 600;
        margin: 5px 0;
    }
    #age{
        color: white;
        margin-left: 5px;
    }
    .icon{
        width: 25px;
        height:25px;
    }
}
 /* 平板或手机 */
 @media screen and (max-width: 1000px){
    #Navi{
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        margin: 5px;
        overflow: auto;
    }
   button.NaviOneBox{
        width: auto;
        margin: 5px;
        div.NaviOne{
            width: auto;       
        }
    }
 }
#Navi{
    margin-top: 20px;
    width: 100%;

    .NaviOneBox{
        width: 100%;
    }
    .NaviOne{
        width:70%; height: 50px;
        min-width: 150px;
        text-align: center;line-height: 50px;
        margin: 10px 0;
        font-size: 18px;font-weight: 600;
        color: white;
        box-sizing: border-box;
        border-radius: 10px;

        .icon{
            width: 20px;
            height: 20px;
            margin-right: 5px;
        }
    }
    .active,.NaviOne:hover{
        background: var(--GeneralBackColor);
        // border-left: 5px solid var(--GeneralBackColor);
        box-shadow: 0px 0px 10px white;
    }

}

</style>